<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据可视化</title>
    <link rel="stylesheet"  href="/xianwangCss/index.css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="../../../js/jquery.js"></script>
    <script type="text/javascript" src="../../../js/china.js"></script>
</head>

<body>
<section class="mainbox">
    <div class="column">
        <div class="panel bar">
            <h2>
                柱状图-客流换乘变换 <a href="javascript:;">换乘前</a>
                <a href="javacript:;"> 换乘后</a>
            </h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>折线图-人员变化</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
            <h2>饼形图-费用占比</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <div class="column">
        <div class="no">

        </div>
        <div class="map">
            <div class="chart"></div>

        </div>
    </div>
    <div class="column">
        <div class="panel bar1">
            <h2>柱状图-2018年日客流总量</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
            <h2>饼形图-平均费用</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
            <h2>饼形图-客流量占比</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>
<!-- 页面主体部分 -->
<script>
    (function flexible(window, document) {
        var docEl = document.documentElement;
        var dpr = window.devicePixelRatio || 1;

        // adjust body font size
        function setBodyFontSize() {
            if (document.body) {
                document.body.style.fontSize = 12 * dpr + "px";
            } else {
                document.addEventListener("DOMContentLoaded", setBodyFontSize);
            }
        }
        setBodyFontSize();

        // set 1rem = viewWidth / 10
        function setRemUnit() {
            var rem = docEl.clientWidth / 24;
            docEl.style.fontSize = rem + "px";
        }

        setRemUnit();

        // reset rem unit on page resize
        window.addEventListener("resize", setRemUnit);
        window.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                setRemUnit();
            }
        });

        // detect 0.5px supports
        if (dpr >= 2) {
            var fakeBody = document.createElement("body");
            var testElement = document.createElement("div");
            testElement.style.border = ".5px solid transparent";
            fakeBody.appendChild(testElement);
            docEl.appendChild(fakeBody);
            if (testElement.offsetHeight === 1) {
                docEl.classList.add("hairlines");
            }
            docEl.removeChild(fakeBody);
        }
    })(window, document);

</script>
<script>
    // 柱状图1模块
    (function() {
        // 实例化对象
        var myChart = echarts.init(document.querySelector(".bar .chart"));
        // 指定配置和数据
        var option = {
            color: ["#2f89cf"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    data: [
                        "BRT→轨道",
                        "BRT→公交",
                        "轨道→BRT",
                        "轨道→公交",
                        "公交→BRT",
                        "公交→轨道",
                        "公交→公交"
                    ],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: "12"
                        }
                    },
                    axisLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: "12"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                            // width: 1,
                            // type: "solid"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "直接访问",
                    type: "bar",
                    barWidth: "35%",
                    data: [25.26, 902.10, 25.38, 302.16, 959.16, 317.94,6274.2] ,
                    itemStyle: {
                        barBorderRadius: 5
                    }
                }
            ]
        };

        // 把配置给实例对象
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });

        // 数据变化
        var dataAll = [
            { year: "换乘前", data:  [25.26, 902.10, 25.38, 302.16, 959.16, 317.94,6274.2]  },
            { year: "换乘后", data: [75.68, 902.10,76.21, 906.49, 959.08, 953.86,5234.16]}
        ];

        $(".bar h2 ").on("click", "a", function() {
            option.series[0].data = dataAll[$(this).index()].data;
            myChart.setOption(option);
        });
    })();

    // 折线图定制
    (function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".line .chart"));

        // (1)准备数据
        var data = {
            year: [
                [0.5, 0.41, 0.5, 0.48, 0.51, 0.5, 0.46, 0.42, 0.5, 0.43, 0.41, 0.35],
                [0.36, 0.48, 0.39, 0.4, 0.37, 0.39, 0.42, 0.43, 0.33, 0.38, 0.35, 0.35],
                [0.095, 0.085, 0.08, 0.082, 0.08, 0.079, 0.089, 0.085, 0.09, 0.12, 0.22, 0.35],
                [0.05, 0.045, 0.05, 0.049, 0.06, 0.058, 0.054, 0.06, 0.08, 0.07, 0, 0]
            ]
        };

        // 2. 指定配置和数据
        var option = {
            color: ["#00f2f1", "#ed3f35","#90EE90", "#DAA520"],
            tooltip: {
                // 通过坐标轴来触发
                trigger: "axis"
            },
            legend: {
                // 距离容器10%
                right: "10%",
                // 修饰图例文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
                // 如果series 里面设置了name，此时图例组件的data可以省略
                // data: ["邮件营销", "联盟广告"]
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true,
                borderColor: "#012f4a",
                containLabel: true
            },

            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 去除x坐标轴的颜色
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: "value",
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 修改y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "#012f4a"
                    }
                }
            },
            series: [
                {
                    name: "E通卡",
                    type: "line",
                    stack: "总量",
                    // 是否让线条圆滑显示
                    smooth: true,
                    data: data.year[0]
                },
                {
                    name: "单程票",
                    type: "line",
                    stack: "总量",
                    smooth: true,
                    data: data.year[1]
                },
                {
                    name: "二维码",
                    type: "line",
                    stack: "总量",
                    smooth: true,
                    data: data.year[2]
                },
                {
                    name: "其他",
                    type: "line",
                    stack: "总量",
                    smooth: true,
                    data: data.year[3]
                }
            ]
        };
        // 3. 把配置和数据给实例对象
        myChart.setOption(option);

        // 重新把配置好的新数据给实例对象
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();

    // 饼形图定制
    // 折线图定制
    (function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".pie  .chart"));

        option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(p) {
                    //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: "90%",
                itemWidth: 10,
                itemHeight: 10,
                data: ["轨道", "普通公交", "BRT"  ],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [
                {
                    name: "单项费用/总费用 ",
                    type: "pie",
                    center: ["50%", "42%"],
                    radius: ["40%", "60%"],
                    color: [
                        "#7FFFAA",
                        "#066eab",
                        "#F4A460",

                    ],
                    label: { show: false },
                    labelLine: { show: false },
                    data: [
                        { value: 27.37, name: "轨道" },
                        { value: 44.27, name: "普通公交" },
                        { value: 28.36, name: "BRT" }

                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
    // 学习进度柱状图模块
    (function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".bar1 .chart"));

        var data = [100, 95, 77.5, 26, 1];
        var titlename = ["北京", "上海", "广州", "武汉", "厦门"];
        var valdata = [1068.9, 1015.3, 829.1,283.9, 11.4];
        var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
        option = {
            //图标位置
            grid: {
                top: "10%",
                left: "22%",
                bottom: "10%"
            },
            xAxis: {
                show: false
            },
            yAxis: [
                {
                    show: true,
                    data: titlename,
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",

                        rich: {
                            lg: {
                                backgroundColor: "#339911",
                                color: "#fff",
                                borderRadius: 15,
                                // padding: 5,
                                align: "center",
                                width: 15,
                                height: 15
                            }
                        }
                    }
                },
                {
                    show: true,
                    inverse: true,
                    data: valdata,
                    axisLabel: {
                        textStyle: {
                            fontSize: 12,
                            color: "#fff"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "条",
                    type: "bar",
                    yAxisIndex: 0,
                    data: data,
                    barCategoryGap: 50,
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 20,
                            color: function(params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num];
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "inside",
                            formatter: "{c}%"
                        }
                    }
                },
                {
                    name: "框",
                    type: "bar",
                    yAxisIndex: 1,
                    barCategoryGap: 50,
                    data: [100, 100, 100, 100, 100],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: "none",
                            borderColor: "#00c1de",
                            borderWidth: 3,
                            barBorderRadius: 15
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
    // 折线图 优秀作品

    (function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".line1 .chart"));
        option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(p) {
                    //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: "90%",
                itemWidth: 10,
                itemHeight: 10,
                data: ["轨道", "普通公交", "BRT"  ],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [
                {
                    name: "单项费用/总费用 ",
                    type: "pie",
                    center: ["50%", "42%"],
                    radius: ["40%", "60%"],
                    color: [
                        "#7FFFAA",
                        "#066eab",
                        "#F4A460",

                    ],
                    label: { show: false },
                    labelLine: { show: false },
                    data: [
                        { value: 61, name: "轨道" },
                        { value: 11, name: "普通公交" },
                        { value: 28, name: "BRT" }

                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();

    (function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".pie1  .chart"));

        option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(p) {
                    //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: "90%",
                itemWidth: 10,
                itemHeight: 10,
                data: ["轨道", "普通公交", "BRT"  ],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [
                {
                    name: "单项客流量/总客流量  ",
                    type: "pie",
                    center: ["50%", "42%"],
                    radius: ["40%", "60%"],
                    color: [
                        "#7FFFAA",
                        "#066eab",
                        "#F4A460",
                        "#0696ab",
                        "#06a0ab",
                        "#06b4ab",
                        "#06c8ab",
                        "#06dcab",
                        "#06f0ab"
                    ],
                    label: { show: false },
                    labelLine: { show: false },
                    data: [
                        { value: 8.34, name: "轨道" },
                        { value: 72.23, name: "普通公交" },
                        { value: 19.43, name: "BRT" }

                    ]
                }
            ]
        };

        // 3. 配置项和数据给我们的实例化对象
        myChart.setOption(option);
        // 4. 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart.resize();
        });
    })();

</script>
<script>
    (function() {
        // 1. 实例化对象
        var myChart = echarts.init(document.querySelector(".map .chart"));

        var namedata = [{name:'张'},{name:'刘'},{name:'李'},{name:'邓'},{name:'熊'},{name:'田'},{name:'周'},{name:'赵'},{name:'钱'},{name:'孙'},
            {name:'吴'},{name:'郑'},{name:'王'},{name:'冯'},{name:'陈'},{name:'杨'},{name:'朱'},{name:'秦'},{name:'许'},{name:'徐'},
            {name:'何'},{name:'曹'},{name:'陶'},{name:'邹'},{name:'苏'},{name:'范'},{name:'彭'},{name:'鲁'},{name:'马'},{name:'方'},
            {name:'唐'},{name:'顾'}];
        var option = null;
        var geoCoordMap = {
            '上海': [119.1803, 31.2891],
            "南京": [118.800697,32.078115],
            "深圳": [114.088124,22.548589],
            "沈阳": [123.46822,41.684907],
            "成都": [104.073895,30.583222],
            "西安": [108.951064,34.355614],
            "苏州": [120.591262,31.305786],
            "昆明": [102.935598,25.091162],
            "杭州": [120.204587,30.258822],
            "哈尔滨": [126.541611,45.812642],
            "郑州": [113.638315,34.755575],
            "长沙": [112.954094,28.233617],
            "宁波": [121.629694,29.867823],
            "无锡": [120.303922,31.500904],
            "青岛": [120.387733,36.073394],
            "重庆": [108.384366, 30.439702],
            '北京': [116.4551, 40.2539],
            "辽宁": [123.1238, 42.1216],
            "河北": [114.4995, 38.1006],
            "天津": [117.4219, 39.4189],
            "山西": [112.3352, 37.9413],
            "陕西": [109.1162, 34.2004],
            "甘肃": [103.5901, 36.3043],
            "宁夏": [106.3586, 38.1775],
            "青海": [101.4038, 36.8207],
            "新疆": [87.9236, 43.5883],
            "南昌": [115.868609,28.688188],
            "福州": [119.307494,26.080169],
            "东莞": [113.758418,23.027042],
            "南宁": [108.376329,22.826604],
            "合肥": [117.226542,31.829278],
            "石家庄": [114.522104,38.052631],
            "贵阳": [106.631406,26.648933],
            "厦门": [118.103334,24.489354],
            "西藏": [91.11, 29.97],
            "四川": [103.9526, 30.7617],
            "吉林": [125.8154, 44.2584],
            "山东": [117.1582, 36.8701],
            "河南": [113.4668, 34.6234],
            "江苏": [118.8062, 31.9208],
            "安徽": [117.29, 32.0581],
            '乌鲁木齐': [87.9236, 43.5883],
            "湖北": [114.3896, 30.6628],
            "浙江": [119.5313, 29.8773],
            '武汉': [114.297213,30.59971],
            '内蒙古': [110.3467, 41.4899],
            "江西": [116.0046, 28.6633],
            "湖南": [113.0823, 28.2568],
            "贵州": [106.6992, 26.7682],
            "云南": [102.9199, 25.4663],
            "广东": [113.12244, 23.009505],
            "广西": [108.479, 23.1152],
            "海南": [110.3893, 19.8516],
            '广州': [113.271429,23.133475],
            '黑龙江': [127.9688, 45.368],
            '大连': [127.9688, 45.368],
            '长春': [125.327731,43.831736]
        };
        var chinaDatas = [
            {
                name: '北京',
                value: 0.58
            },
            {
                name: '天津',
                value: 0.14
            },
            {
                name: '上海',
                value: 0.42
            },
            {
                name: '广州',
                value: 0.6
            },

            {
                name: '长春',
                value: 0.091
            },
            {
                name: '大连',
                value: 0.24
            },
            {
                name: '武汉',
                value: 0.33
            },
            {
                name: '深圳',
                value: 0.41
            },
            {
                name: '南京',
                value: 0.48
            },
            {
                name: '沈阳',
                value: 0.18
            },
            {
                name: '成都',
                value: 0.41
            },
            {
                name: '重庆',
                value: 0.16
            },
            {
                name: '西安',
                value: 0.405
            },
            {
                name: '苏州',
                value: 0.275
            },
            {
                name: '昆明',
                value: 0.13
            },
            {
                name: '杭州',
                value: 0.22
            },
            {
                name: '哈尔滨',
                value: 0.08
            },
            {
                name: '郑州',
                value: 0.115
            },
            {
                name: '长沙',
                value: 0.116
            },
            {
                name: '宁波',
                value: 0.1
            },
            {
                name: '无锡',
                value: 0.105
            },
            {
                name: '青岛',
                value: 0.095
            },
            {
                name: '南昌',
                value: 0.135
            },
            {
                name: '福州',
                value: 0.065
            },
            {
                name: '东莞',
                value: 0.015
            },
            {
                name: '南宁',
                value: 0.195
            },
            {
                name: '合肥',
                value: 0.105
            },
            {
                name: '石家庄',
                value: 0.09
            },
            {
                name: '贵阳',
                value: 0.02
            },
            {
                name: '厦门',
                value: 0.25
            },
            {
                name: '乌鲁木齐',
                value: 0.025
            }
        ];
        var convertData = function(data, type) {
            /*type:1 地图参数；type:2数据参数*/
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    if (type == 2) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                            username: data[i].username,
                            telphone: data[i].telphone,
                            address: data[i].address
                        });
                    } else {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
            }
//console.log(res);
            return res;
        };
        var yData = [];
        var barData = chinaDatas;
        barData = barData.sort(function(a,b){
            return b.value-a.value;
        });
        for(var j =0;j<barData.length;j++){
            if(j<10){
                yData.push('0'+j + barData[j].name);
            }else{
                yData.push(j + barData[j].name);
            }
        }

        option = {
            backgroundColor: '#ffffff00',
            title: [{
                show: true,
                text: '城市轨道运营分析表',
                subtext: '比值',
                subtextStyle:{
                    color:'#ffffff',
                    lineHeight:20
                },
                textStyle: {
                    color: '#fff',
                    fontSize: 18
                },
                right: 140,
                top: 20
            }],
            grid: {
                right: 10,
                top: 80,
                bottom: 20,
                width: '200'
            },
            xAxis: {
                show: false
            },
            yAxis: {
                type: 'category',
                inverse: true,
                nameGap: 16,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLabel: {
                    interval: 0,
                    margin: 85,
                    textStyle: {
                        color: '#fff',
                        align: 'left',
                        fontSize: 14
                    },
                    rich: {
                        a: {
                            color: '#fff',
                            backgroundColor: '#f0515e',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                        },
                        b: {
                            color: '#fff',
                            backgroundColor: '#24a5cd',
                            width: 20,
                            height: 20,
                            align: 'center',
                            borderRadius: 2
                        }
                    },
                    formatter: function(params) {
                        if (parseInt(params.slice(0, 2)) < 3) {
                            return [
                                '{a|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
                            ].join('\n')
                        } else {
                            return [
                                '{b|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
                            ].join('\n')
                        }
                    }
                },
                data: yData
            },
            geo: {
                map: 'china',
                label: {
                    show: true,
                    color: '#ffffff',
                    emphasis: {
                        color: 'white',
                        show: false
                    }
                },
                roam: true,//是否允许缩放
                top: 100,
                left: 'left',
                right: '300',
                zoom: 2, //默认显示级别
                scaleLimit: {
                    min: 0,
                    max: 3
                }, //缩放级别
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(26,82,231, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(14, 101, 247, .1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(125, 183, 252, .1)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(255, 255, 255, 0)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: 'rgba(249,157,51, .)',
                        borderWidth: 0
                    }
                },
//是否显示南海诸岛
                /*regions: [{
                name: "南海诸岛",
                value: 0,
                itemStyle: {
                normal: {
                opacity: 0,
                label: {
                show: false
                }
                }
                }
                }],*/
                tooltip: {
                    show: false
                }
            },
            series: [
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    z: 1,
                    data: [],
                    symbolSize: 14,
                    label: {
                        normal: {
                            show: true,
                            formatter: function(params) {
                                return '{fline|轨道城市：'+params.data.username+'  '+'}\n{tline|'+params.data.address+'}';
                            },
                            position: 'top',
                            backgroundColor: 'rgba(254,174,33,.8)',
                            padding: [0, 0],
                            borderRadius: 3,
                            lineHeight: 32,
                            color: '#f7fafb',
                            rich:{
                                fline:{
                                    padding: [0, 10, 10, 10],
                                    color:'#ffffff'
                                },
                                tline:{
                                    padding: [10, 10, 0, 10],
                                    color:'#ffffff'
                                }
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        color: '#feae21',
                    }
                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    z: 1,
                    data: [],
                    symbolSize: 14,
                    label: {
                        normal: {
                            show: true,
                            formatter: function(params) {
                                return '{fline|轨道城市：'+params.data.username+'  '+'}\n{tline|'+params.data.address+'}';
                            },
                            position: 'top',
                            backgroundColor: 'rgba(233,63,66,.9)',
                            padding: [0, 0],
                            borderRadius: 3,
                            lineHeight: 32,
                            color: '#ffffff',
                            rich:{
                                fline:{
                                    padding: [0, 10, 10, 10],
                                    color:'#ffffff'
                                },
                                tline:{
                                    padding: [10, 10, 0, 10],
                                    color:'#ffffff'
                                }
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        color: '#e93f42',
                    }
                },
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    z: 1,
                    data: [],
                    symbolSize: 14,
                    label: {
                        normal: {
                            show: true,
                            formatter: function(params) {
                                return '{fline|轨道城市：'+params.data.username+'  '+'}\n{tline|'+params.data.address+'}';
                            },
                            position: 'top',
                            backgroundColor: 'rgba(8,186,236,.9)',
                            padding: [0, 0],
                            borderRadius: 3,
                            lineHeight: 32,
                            color: '#ffffff',
                            rich:{
                                fline:{
                                    padding: [0, 10, 10, 10],
                                    color:'#ffffff'
                                },
                                tline:{
                                    padding: [10, 10, 0, 10],
                                    color:'#ffffff'
                                }
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        color: '#08baec',
                    }
                },
//地图
                {
                    type: 'map',
                    mapType: 'china',
                    geoIndex: 0,
                    z: 0,
                    data: convertData(chinaDatas, 1)
                },
                {
                    name: 'barSer',
                    type: 'bar',
                    roam: false,
                    visualMap: false,
                    zlevel: 2,
                    barMaxWidth: 16,
                    barGap: 0,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorList = [{
                                    colorStops: [{
                                        offset: 0,
                                        color: '#f0515e'
                                    }, {
                                        offset: 1,
                                        color: '#ef8554'
                                    }]
                                },
                                    {
                                        colorStops: [{
                                            offset: 0,
                                            color: '#3c38e4'
                                        }, {
                                            offset: 1,
                                            color: '#24a5cd'
                                        }]
                                    }
                                ];
                                if (params.dataIndex < 3) {
                                    return colorList[0]
                                } else {
                                    return colorList[1]
                                }
                            },
                            barBorderRadius: [0,15,15,0]
                        }
                    },
                    label:{
                        normal: {
                            show: true,
                            textBorderColor: '#333',
                            textBorderWidth: 2
                        }
                    },
                    data: barData.sort((a,b)=>{
                        return b.value-a.value;
                    })
                }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        function getTel(){
            var n = 2,telstr = '1';
            while(n<12){
                if(n<3){
                    while(1){
                        var nums = Math.floor(Math.random()*10);
                        if(nums!==0&&nums!==1&&nums!==2&&nums!==3&&nums!==4&&nums!==6){
                            telstr+=nums;
                            break;
                        }
                    }

                }else if(n>3&&n<8){
                    telstr+='*';
                }else{
                    telstr+=Math.floor(Math.random()*10);
                }
                n++;
            }
            return telstr;
        }
        function getName(type){
            var name = '';
            var roundnum = Math.floor(Math.random()*32);
            switch (type) {
                case 1:
                    name = '地区';
                    break;
                case 2:
                    name = '地区';
                    break;
                default:
                    name = '地区';
                    break;
            }
            return name;
        }
        function getAddress(num,type){
            var addstr = '';
            switch (type) {
                case 1:
                    addstr = chinaDatas[num].name+'的客流人口比:'+chinaDatas[num].value*100+'%';
                    break;
                case 2:
                    addstr = chinaDatas[num].name+'的客流人口比:'+chinaDatas[num].value*100+'%';
                    break;
                default:
                    addstr = chinaDatas[num].name+'的客流人口比:'+chinaDatas[num].value*100+'%';
                    break;
            }
            return addstr;
        }
        var timer = setInterval(()=>{

//数据情况重绘，清除formatter移动效果，也可根据自身需求是否需要，删除这两行代码
            /*option.series[seriesjson[runidx].createType-1].data = [];
            myChart.setOption(option, true);*/
            var runidx = Math.floor(Math.random()*3);
            var typeidx = Math.floor(Math.random()*3);
            var dataidx = Math.floor(Math.random()*32);
            var ranval = Math.floor(Math.random()*10);
            var valarr = geoCoordMap[chinaDatas[dataidx].name];
            valarr.push(ranval);
            option.series[typeidx].data = [{
                name:'',
                username: getName(runidx),
                telphone: getTel(),
                address: getAddress(dataidx,typeidx),
                value: valarr
            }];
            option.series[4].data = option.series[4].data.sort(function(a,b){
                return b.value-a.value;
            });
            myChart.setOption(option, true);
        },3000);
    })();

</script>
</body>
</html>
